<template>
	<view>
		<vk-data-fab-group
			:pattern="fab.pattern"
			:content="fab.content"
			:horizontal="fab.horizontal"
			:vertical="fab.vertical"
			:direction="fab.direction"
			@trigger="trigger"
		></vk-data-fab-group>
	</view>
</template>

<script>
	export default {
		data() {
			// 页面数据变量
			return {
				fab:{
					pattern:{
						color:"#3c3e49",// 未选中的项的文字颜色
						selectedColor:"#007AFF", // 选中的项的文字颜色
						backgroundColor:"#ffffff", // 弹窗的背景色
						buttonColor:"rgba(0,0,0,0.8)", // 主按钮的背景色
					},
					content:[
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"首页" },
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"订单" },
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"我的" },
						{ icon:"/static/logo.png", selectedIcon:"/static/logo.png", text:"客服" },
					],
					horizontal:"right",// 水平对齐方式。left:左对齐，right：右对齐
					vertical:"bottom",// 垂直对齐方式。bottom:下对齐，top：上对齐
					direction:"vertical", // 展开菜单显示方式。horizontal:水平显示，vertical：垂直显示
				},
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			
		},
		// 函数
		methods: {
			trigger(obj){
				uni.showToast({
					title:`点击了${obj.item.text}`,
					icon:"none"
				})
			}
		},
		// 过滤器
		filters:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>
<style lang="scss" scoped>
	
</style>